<!-- eslint-disable vue/no-template-shadow -->
<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px" label-position="left">
      <el-form-item label="移库编号" prop="move_code">
        <el-input v-model="queryParams.move_code" placeholder="移位编号" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleCreate({}, '移库')">移库
        </el-button>
      </el-col>
    </el-row>

    <!--  弹窗  -->
    <el-dialog :title="title" :visible.sync="open" width="1400px" append-to-body>
      <el-form ref="searchForm" v-loading="loadingx" :inline="true" label-width="70px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.goods_name" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="项目名称">
              <el-input v-model="searchForm.project_name" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="入库编号">
              <el-input v-model="searchForm.warehousing_id" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="托盘码">
              <el-input v-model="searchForm.tray_id" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button icon="el-icon-search" type="primary" plain circle @click="getStock" />
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left" class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-transfer
              v-model="form.checked"
              :data="stockList"
              filterable
              :filter-method="dataFilter"
              :titles="['待选', '已选']"
              @change="getObject"
              @right-check-change="rightCheck($event)"
            >
              <span slot-scope="{ option }">
                <span class="span1" style="width:150px">{{ option.label ? option.label : "--" }}</span>
                <span class="span1" style="width:150px">{{ option.stock_current_status ? option.stock_current_status : "--" }}</span>
                <span class="span1" style="width:100px">{{ option.config_name ? option.config_name : "--" }}</span>
                <span class="span1" style="width:100px">{{ option.type ? option.type : "--" }}</span>
                <span class="span1" style="width:150px">{{ option.box_id ? option.box_id : "--" }}</span>
                <span class="span1" style="width:100px">{{ option.box_number ? option.box_number : "--" }}</span>
                <span class="span1" style="width:150px">{{ option.slice_id ? option.slice_id : "--" }}</span>
                <span class="span1" style="width:150px">{{ option.tray_id ? option.tray_id : "--" }}</span>
                <span class="span1" style="width:50px">{{ option.Good_Qty ? option.Good_Qty : "--" }}</span>
              </span>
            </el-transfer>
          </el-col>
        </el-row>
        <div style="width: 100%;position: relative;height: 30px;">
          <el-row class="change_button">
            <el-button type="primary" @click="checkKw()">选择库位</el-button>
            <el-button type="primary" @click="resetting()">重置</el-button>
            <el-button type="primary" @click="devanning()">拆箱</el-button>
            <el-button type="primary" @click="DismantlingParts()">拆件</el-button>
          </el-row>
        </div>
        <el-dialog width="50%" title="选择库位" :visible.sync="innerVisible" append-to-body>
          <el-row v-loading="loading" style="top: 30px;margin-bottom: 30px;">
            <el-col :span="24">
              <el-form-item label="目标库位" prop="MBlocation">
                <el-cascader
                  v-model="location"
                  placeholder="请选择库位"
                  :options="selectData"
                  clearable
                  filterable
                  :props="props"
                  style="width: 30%;"
                />
                <el-input v-model="search" placeholder="请输入库位关键词" style="width: 20%;margin-left: 3%;" />
                <el-button icon="el-icon-search" type="primary" plain circle style="margin-left: 15px;" @click="getBox" />
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <span v-if="choice">{{ choice }} </span>
              </el-form-item>
              <div style="height:150px;margin-top: 20px;overflow-y:auto;">
                <el-radio-group v-model="choice" size="medium" :max="max">
                  <el-radio-button
                    v-for="item in box"
                    :key="item.config_id"
                    :label="item.name"
                    :disabled="item.disabled"
                    class="box"
                    border
                    @change="check_kw(item.config_id)"
                  />
                </el-radio-group>
              </div>

            </el-col>
          </el-row>
          <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
            <el-col :span="24">
              <el-button type="primary" size="medium" @click="QdKw()">确定</el-button>
              <el-button size="medium" @click="innerVisible = false">取消</el-button>
            </el-col>
          </el-row>
          <el-dialog
            width="30%"
            title="选择库位状态"
            :visible.sync="innerVisible4"
            append-to-body
          >
            <div>
              <el-radio-group v-model="radio1">
                <el-radio-button label="全部库位" />
                <el-radio-button label="有货库位" />
                <el-radio-button label="空库位" />
              </el-radio-group>
            </div>
            <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
              <el-col :span="24">
                <el-button type="primary" size="medium" @click="gettingBox()">确定</el-button>
                <el-button size="medium" @click="innerVisible4 = false;loading = false">取消</el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-dialog>

        <el-dialog width="35%" title="选择拆箱" :visible.sync="innerVisible2" append-to-body>
          <el-form ref="form" :model="arr2" label-width="120px" style="width: 60%;margin: 0 auto;">
            <el-form-item label="商品名称">
              {{ arr2.label }}
            </el-form-item>
            <el-form-item label="商品箱号">
              {{ arr2.box_id ? arr2.box_id : '--' }}
            </el-form-item>
            <el-form-item label="商品箱数">
              {{ arr2.box_number }}
            </el-form-item>
            <el-form-item label="需要拆出的数量">
              <el-input v-model="arr2.box_number2" style="width: 50%;" />
            </el-form-item>
            <el-form-item>
              <span slot="label" style="width: 150px;display: flex;">
                箱号(多个请换行)
              </span>
              <el-input v-model="arr2.allBoxId" type="textarea" autosize placeholder="请输入内容" />
            </el-form-item>
          </el-form>

          <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
            <el-col :span="24">
              <el-button type="primary" size="medium" @click="cxAction()">确定</el-button>
              <el-button size="medium" @click="innerVisible2 = false">取消</el-button>
            </el-col>
          </el-row>

        </el-dialog>

        <el-dialog width="35%" title="选择拆件" :visible.sync="innerVisible3" append-to-body>
          <el-form ref="form" :model="arr3" label-width="120px" style="width: 60%;margin: 0 auto;">
            <el-form-item label="商品名称">
              {{ arr3.label }}
            </el-form-item>
            <el-form-item label="商品件号">
              {{ arr3.slice_id ? arr3.slice_id : '--' }}
            </el-form-item>
            <el-form-item label="商品件数">
              {{ arr3.Good_Qty }}
            </el-form-item>
            <el-form-item label="每箱规格">
              {{ arr3.packing_num }}
            </el-form-item>
            <el-form-item label="需要拆出的数量">
              <el-input v-model="arr3.Good_Qty2" style="width: 50%;" />
            </el-form-item>
            <el-form-item>
              <span slot="label" style="width: 150px;display: flex;">
                片号(多个请换行)
              </span>
              <el-input v-model="arr3.allSliceId" type="textarea" autosize placeholder="请输入内容" />
            </el-form-item>
          </el-form>

          <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
            <el-col :span="24">
              <el-button type="primary" size="medium" @click="cjAction()">确定</el-button>
              <el-button size="medium" @click="innerVisible3 = false">取消</el-button>
            </el-col>
          </el-row>

        </el-dialog>

        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="open = false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--  弹窗结束  -->

    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="移库编号">
              <span>{{ props.row.move_code }}</span>
            </el-form-item>
            <el-form-item label="移库状态">
              <span v-if="props.row.move_status == 0">未移库</span>
              <span v-if="props.row.move_status == 1">部分移库</span>
              <span v-if="props.row.move_status == 2">全部移库</span>
            </el-form-item>
            <el-form-item label="移库总量">
              <span>{{ props.row.number }}</span>
            </el-form-item>
            <el-form-item label="已移库量">
              <span>{{ props.row.move_number }}</span>
            </el-form-item>
            <el-form-item label="添加人">
              <span>{{ props.row.username }}</span>
            </el-form-item>
            <el-form-item label="添加时间">
              <span>{{ props.row.created_at }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="移库编号" prop="move_code" />
      <el-table-column label="移库总量" prop="number" />
      <el-table-column label="已移库量" prop="move_number" />
      <el-table-column label="移库状态" prop="move_status">
        <template v-slot="scope">
          <span v-if="scope.row.move_status == 0">未移库</span>
          <span v-if="scope.row.move_status == 1">部分移库</span>
          <span v-if="scope.row.move_status == 2">全部移库</span>
        </template>
      </el-table-column>
      <el-table-column label="添加人" prop="username" />
      <el-table-column label="添加时间" prop="created_at" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template v-slot="scope">
          <el-button size="mini" type="success" @click="move(scope.row)">移库信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getMoveMain, getStock, moveCreate, att, getSon, MoveMainCreate, split } from '@/api/stock'
export default {
  name: 'StockMoveMain',
  data() {
    return {
      loading: false,
      queryParams: {
        page: 1,
        limit: 10
      },
      list: [],
      // 弹窗参数
      // loading: false,
      loadingx: false,
      open: false,
      title: '',
      searchForm: {},
      form: {},
      rules: {},
      stockList: [],
      selectData: [],
      props: {
        expandTrigger: 'hover'
      },
      location: [],
      MBlocation: { disabled: 'disabled' },
      search: '',
      choice: '',
      max: 0, // 多选框数量
      box: [],
      checked: [],
      innerVisible: false,
      innerVisible2: false,
      innerVisible3: false,
      innerVisible4: false,
      box_number: 0,
      arr2: {},
      arr3: {},
      total: 0,
      radio1: '全部库位'
    }
  },
  computed: {
    list_num() {
      return this.form.checked ? this.form.checked.length : 0
    }
  },
  watch: {
    list_num() {
      this.max = this.list_num
    }
  },
  created() {
    this.getList()
    this.getLocationx()
  },
  methods: {
    // 拆件 提交
    cjAction() {
      if (this.arr3.Good_Qty2 > this.arr3.packing_num) {
        this.$message.error('拆件数量不能大于每箱规格数量')
        return
      }
      if (this.arr3.Good_Qty2 == '') {
        this.innerVisible3 = false
        return
      }
      var AllList = []
      // 把allboxid 以 /n 分割 变成数组
      if (this.arr3.allSliceId) {
        AllList = this.arr3.allSliceId.split('\n')
      }
      // 删除数组中的空元素
      for (var i = 0; i < AllList.length; i++) {
        if (AllList[i] == '') {
          AllList.splice(i, 1)
          i = i - 1
        }
        if (AllList[i] == ' ') {
          AllList.splice(i, 1)
          i = i - 1
        }
      }
      if (AllList !== []) {
        if (AllList.length !== 0) {
          if (AllList.length > Number(this.arr3.Good_Qty2)) {
            this.$message.error('新的片号id数量大于需要拆片数量')
            return
          }
          if (AllList.length < Number(this.arr3.Good_Qty2)) {
            this.$message.error('新的片号id数量小于需要拆片数量')
            return
          }
        }
      }
      split({ stock_id: this.arr3.stock_id, num: this.arr3.Good_Qty2, generate_ids: AllList }).then(res => {
        console.log(res)
        if (res.code === 10000) {
          if (res.data.length == 1) {
            // 查找stocklist
            this.stockList.forEach(item => {
              if (item.stock_id === res.data[0].stock_id) {
                item.box_number = res.data[0].box_number
                item.Good_Qty = res.data[0]._stock_num
                item.box_id = res.data[0].box_id
                item.type = res.data[0]._stock_type
                item.slice_id = res.data[0].slice_id
              }
            })
            this.$message.success('拆件成功')
            this.innerVisible3 = false
          } else {
            this.stockList.forEach(item => {
              if (item.stock_id === res.data[0].stock_id) {
                item.box_number = res.data[0].box_number
                item.Good_Qty = res.data[0]._stock_num
                item.box_id = res.data[0].box_id
                item.type = res.data[0]._stock_type
                item.slice_id = res.data[0].slice_id
              }
            })
            // 在stocklist中添加新的数据 并且选中 res.data 除了第一个
            res.data.forEach((item, index) => {
              if (index !== 0) {
                const newObj = Object.assign({}, this.arr2)
                newObj.stock_id = item.stock_id
                newObj.id = item.id
                newObj.label = item.goods_name
                newObj.config_name = item.config_name
                newObj.config_id = item.config_id
                newObj.goods_id = item.goods_id
                newObj.tray_id = item.tray_id
                newObj.box_id = item.box_id
                newObj.box_number = item.box_number
                newObj.slice_id = item.slice_id
                newObj.Good_Qty = item._stock_num
                newObj.packing_num = item.packing_num
                newObj.type = item._stock_type
                newObj.stock_id = item.stock_id
                newObj.key = this.stockList.length - 1
                this.stockList.push(newObj)
                this.stockList[this.stockList.length - 1].key = this.stockList.length - 1
                this.form.checked.push(this.stockList.length - 1)
              }
            })
            this.$message.success('拆件成功')
            this.innerVisible3 = false
          }
        }
        // this.innerVisible2 = false
        // this.getList()
        this.changeLB()
      })
    },
    // 拆件 弹窗
    DismantlingParts() {
      if (!this.arr) {
        this.$message.error('请选择库位进行拆件')
        return
      }
      if (this.arr.length === 0) {
        this.$message.error('请选择库位进行拆件')
        return
      }
      if (this.arr.length > 1) {
        this.$message.error('只能选择一个库位进行拆件')
        return
      }
      if (this.arr[0].type === '托') {
        this.$message.error('该库位是托盘，请先拆箱再拆件')
        return
      }
      if (this.arr[0].type === '件') {
        this.$message.error('该库位已经拆件过了，不能再拆件')
        return
      }
      this.arr3 = this.arr[0]
      delete this.arr3.Good_Qty2
      delete this.arr3.allSliceId
      this.innerVisible3 = true
    },
    // 拆箱 提交
    cxAction() {
      console.log(this.arr2.box_number, this.arr2.box_number2)
      if (this.arr2.box_number2 > this.arr2.box_number) {
        this.$message.error('拆箱数量不能大于原箱数量')
        return
      }
      // if (this.arr2.box_number2 == this.arr2.box_number) {
      //   this.$message.error('拆箱数量不能等于原箱数量')
      //   return
      // }
      if (this.arr2.box_number2 == '') {
        this.innerVisible2 = false
        return
      }
      var AllList = []
      // 把allboxid 以 /n 分割 变成数组
      if (this.arr2.allBoxId) {
        AllList = this.arr2.allBoxId.split('\n')
      }
      // 删除数组中的空元素
      for (var i = 0; i < AllList.length; i++) {
        if (AllList[i] == '') {
          AllList.splice(i, 1)
          i = i - 1
        }
        if (AllList[i] == ' ') {
          AllList.splice(i, 1)
          i = i - 1
        }
      }
      console.log(AllList)
      if (AllList !== []) {
        if (AllList.length !== 0) {
          if (AllList.length > Number(this.arr2.box_number2)) {
            this.$message.error('新的箱号id数量大于需要拆箱数量')
            return
          }
          if (AllList.length < Number(this.arr2.box_number2)) {
            this.$message.error('新的箱号id数量小于需要拆箱数量')
            return
          }
        }
      }
      split({ stock_id: this.arr2.stock_id, num: this.arr2.box_number2, generate_ids: AllList }).then(res => {
        console.log(res)
        if (res.code === 10000) {
          if (res.data.length == 1) {
            // 查找stocklist
            this.stockList.forEach(item => {
              if (item.stock_id === res.data[0].stock_id) {
                item.box_number = res.data[0].box_number
                item.Good_Qty = res.data[0]._stock_num
                item.box_id = res.data[0].box_id
                item.type = res.data[0]._stock_type
                item.allBoxId = ''
                item.box_number2 = ''
              }
            })
            this.$message.success('拆箱成功')
            this.arr2.box_number2 = ''
            this.innerVisible2 = false
          } else {
            this.stockList.forEach(item => {
              if (item.stock_id === res.data[0].stock_id) {
                item.box_number = res.data[0].box_number
                item.Good_Qty = res.data[0]._stock_num
                item.box_id = res.data[0].box_id
                item.type = res.data[0]._stock_type
                item.allBoxId = ''
                item.box_number2 = ''
              }
            })
            // 在stocklist中添加新的数据 并且选中 res.data 除了第一个
            res.data.forEach((item, index) => {
              if (index !== 0) {
                const newObj = Object.assign({}, this.arr2)
                newObj.stock_id = item.stock_id
                newObj.id = item.id
                newObj.label = item.goods_name
                newObj.config_name = item.config_name
                newObj.config_id = item.config_id
                newObj.goods_id = item.goods_id
                newObj.tray_id = item.tray_id
                newObj.box_id = item.box_id
                newObj.box_number = item.box_number
                newObj.slice_id = item.slice_id
                newObj.Good_Qty = item._stock_num
                newObj.packing_num = item.packing_num
                newObj.type = item._stock_type
                newObj.stock_id = item.stock_id
                newObj.key = this.stockList.length - 1
                this.stockList.push(newObj)
                this.stockList[this.stockList.length - 1].key = this.stockList.length - 1
                this.form.checked.push(this.stockList.length - 1)
              }
            })
            this.$message.success('拆箱成功')
            this.arr2.box_number2 = ''
            this.innerVisible2 = false
          }
        }
        // this.innerVisible2 = false
        // this.getList()
        this.changeLB()
      })
    },
    // 拆箱 弹窗
    devanning() {
      if (!this.arr) {
        this.$message.error('请选择库位进行拆箱')
        return
      }
      if (this.arr.length === 0) {
        this.$message.error('请选择库位进行拆箱')
        return
      }
      if (this.arr.length > 1) {
        this.$message.error('只能选择一个库位进行拆箱')
        return
      }
      if (this.arr[0].type !== '托') {
        this.$message.error('该库位已经拆箱/拆件过了，不能再拆箱')
        return
      }
      this.arr2 = this.arr[0]
      delete this.arr2.box_number2
      delete this.arr2.allBoxId
      this.innerVisible2 = true
    },
    check_kw(id) {
      console.log(1)
      console.log(id)
    },
    // 移库 确定库位
    QdKw() {
      this.config_id_two = ''
      this.box.forEach(item => {
        if (item.name === this.choice) {
          this.config_id_two = item.config_id
        }
      })
      if (this.rightList.length === 1) {
        // this.arr.config_name = this.choice
        this.stockList[this.rightList].config_name = this.choice
        this.stockList[this.rightList].config_id_two = this.config_id_two
        this.innerVisible = false
      } else {
        for (let i = 0; i < this.rightList.length; i++) {
          this.stockList[this.rightList[i]].config_name = this.choice
          this.stockList[this.rightList[i]].config_id_two = this.config_id_two
        }
        this.innerVisible = false
      }
    },
    // 类别转换
    changeLB() {
      this.stockList.forEach(item => {
        if (item.type === 'tray') {
          item.type = '托'
        } else if (item.type === 'box') {
          item.type = '箱'
        } else if (item.type === 'slice') {
          item.type = '件'
        }
      })
    },
    // 重置
    resetting() {
      this.form.checked = []
      this.choice = []
      this.box = []
      this.location = []
    },
    rightCheck(event) {
      this.rightList = event
      this.arr = []
      if (event.length === 1) {
        this.arr.push(this.stockList[event])
        console.log(this.arr)
      } else {
        for (let i = 0; i < event.length; i++) {
          this.arr.push(this.stockList[event[i]])
        }
        console.log(this.arr)
      }
    },
    checkKw() {
      var that = this
      if (this.rightList) {
        const changeBox = []
        const changeSlice = []
        this.arr.forEach(function(item, index) {
          if (item.box_id) {
            changeBox.push(item.box_id)
          }
          if (item.slice_id) {
            if (item.box_id) {
              changeBox.splice(changeBox.indexOf(item.box_id), 1)
              changeSlice.push(item.slice_id)
            } else {
              changeSlice.push(item.slice_id)
            }
          }
        })
        // if (changeBox.length > 0 && changeSlice.length > 0) {
        //   this.$message.error('不能同时选择不同的单位')
        //   return
        // }
        this.innerVisible = true
      } else {
        this.$message.error('请选择库位')
        this.innerVisible = false
      }
    },
    /** 查询清单列表 */
    getList() {
      this.loading = true
      getMoveMain(this.queryParams).then(response => {
        this.list = response.data
        this.total = response.count
        this.loading = false
      })
    },
    /** 打开 */
    handleCreate(row, title) {
      const that = this
      that.title = title
      that.open = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        page: 1,
        limit: 10
      }
      this.handleQuery()
    },
    move(row) {
      this.$router.push({
        path: '/stock/move',
        query: { move_code: row.move_code }
      })
    },
    /** */
    getStock() {
      this.loadingx = true
      getStock({ searchForm: this.searchForm }).then(response => {
        this.loadingx = false
        const data = [
          {
            key: 0,
            id: '',
            label: '商品名称',
            config_name: '库位',
            tray_id: '托盘码',
            box_id: '箱号',
            box_number: '箱数',
            slice_id: '片号',
            Good_Qty: '库存',
            disabled: true,
            type: '类别',
            stock_current_status: '状态'
          }
        ]
        for (let i = 0; i < response.data.length; i++) {
          data.push({
            key: i + 1,
            id: response.data[i].id,
            label: response.data[i].goods_name,
            config_name: response.data[i].config_name,
            config_id: response.data[i].config_id,
            goods_id: response.data[i].goods_id,
            tray_id: response.data[i].tray_id,
            box_id: response.data[i].box_id,
            box_number: response.data[i]._split_box_number,
            slice_id: response.data[i].slice_id,
            Good_Qty: response.data[i]._stock_num,
            packing_num: response.data[i].packing_num,
            type: response.data[i]._stock_type,
            stock_id: response.data[i].stock_id,
            unit_name: response.data[i].unit_name,
            disabled: response.data[i].disabled,
            stock_current_status: response.data[i].stock_current_status
          })
        }
        this.stockList = data
        this.changeLB()
        // console.log(this.stockList)
      })
    },
    // 穿梭框改变
    getObject(value, direction, movedKeys) {
      this.ids = value
    },
    dataFilter(query, item) {
      return (item.label + item.config_name + item.tray_id + item.box_id + item.slice_id).indexOf(query) > -1
    },
    // getBox() {
    //   if (this.location.length === 0) {
    //     this.$message({
    //       showClose: true,
    //       message: '请选择仓库！',
    //       type: 'error'
    //     })
    //     return false
    //   }
    //   this.loading = true
    //   const location = JSON.parse(JSON.stringify(this.location))
    //   if (location.length) {
    //     const that = this
    //     getSon({ config_id: location[1], checked: that.checked, search: that.search }).then(response => {
    //       if (response.code === 10000) {
    //         that.box = JSON.parse(JSON.stringify(response.data))
    //         that.loading = false
    //       }
    //     })
    //   }
    // },
    submitForm(formName) {
      const that = this
      this.$confirm('此操作将只移动被选中的, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (that.form.checked === undefined || that.form.checked.length === 0) {
              that.$message.error('请选择移库商品')
              return
            }
            if (!that.choice.length) {
              that.$message.error('请选择目标库位')
              return
            }
            // if (that.form.checked.length !== that.choice.length) {
            //   that.$message.error('移库商品与目标库位不匹配')
            //   return
            // }
            if (that.arr.length == 0) {
              that.$message.error('请勾选需要的移库货物')
              return
            }
            const info = []
            for (let i = 0; i < that.arr.length; i++) {
              info.push({
                'tray_id': that.arr[i].tray_id ? that.arr[i].tray_id : '',
                'box_id': that.arr[i].box_id ? that.arr[i].box_id : '',
                'slice_id': that.arr[i].slice_id ? that.arr[i].slice_id : '',
                'config_id': that.arr[i].config_id ? that.arr[i].config_id : '',
                'goods_name': that.arr[i].label ? that.arr[i].label : '',
                'goods_id': that.arr[i].goods_id ? that.arr[i].goods_id : '',
                'config_name': that.arr[i].config_name ? that.arr[i].config_name : '',
                'stock_id': that.arr[i].stock_id ? that.arr[i].stock_id : '',
                'config_id_two': that.arr[i].config_id_two ? that.arr[i].config_id_two : ''
              })
            }
            const data = {
              info: info
            }
            // console.log(data)
            // return
            MoveMainCreate(data).then(response => {
              if (response.code === 10000) {
                that.$message.success(response.message)
                that.open = false
                that.getList()
                that.$message({
                  showClose: true,
                  message: '移库成功',
                  type: 'success'
                })
                // that.$router.push({ path: '/stock/move' })
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    /** 查询库位 */
    getLocationx() {
      const that = this
      att().then(response => {
        if (response.code === 10000) {
          that.selectData = JSON.parse(JSON.stringify(response.data))
          that.selectList(that.selectData)
          // console.log(that.selectData)
        }
      })
    },
    /** 处理数据 */
    selectList(data) {
      const replaceKey = function(data) {
        data.forEach(function(row, index, arr) {
          const temp = { label: row.name, value: row.config_id, disabled: row.disabled }
          if (row.children !== undefined) {
            if (row.children.length > 0) {
              temp['children'] = row.children
            }
            arr[index] = temp
            if (arr[index].children.length > 0) {
              replaceKey(arr[index].children)
            }
          } else {
            arr[index] = temp
          }
        })
      }
      replaceKey(data)
    },
    getBox() {
      if (this.location.length === 0) {
        this.$message({
          showClose: true,
          message: '请选择仓库！',
          type: 'error'
        })
        return false
      }
      this.loading = true
      this.innerVisible4 = true
    },
    gettingBox() {
      const location = JSON.parse(JSON.stringify(this.location))
      // console.log(location)
      let getting = ''
      if (this.radio1) {
        if (this.radio1 === '全部库位') {
          getting = 'all'
        } else if (this.radio1 === '空库位') {
          getting = 'empty'
        } else if (this.radio1 === '有货库位') {
          getting = 'notEmpty'
        }
      }
      if (location.length) {
        const that = this
        getSon({ config_id: location[1], checked: that.checked, search: that.search, config_used_status: getting }).then(response => {
          if (response.code === 10000) {
            that.box = JSON.parse(JSON.stringify(response.data))
            that.innerVisible4 = false
            that.loading = false
          }
        })
      }
    }
  }
}
</script>

<style>
.box {
  /* float: left; */
  margin: 3px;
  width: 100px;
  display: inline-grid;
}

.el-input__suffix {
  right: 10%;
}

.el-transfer-panel {
  width: 100%;
}

.el-transfer__buttons {
  transform: rotate(90deg);
  /* transform-origin: top left; */
  margin: 50px 590px;
}

.el-transfer-panel__list.is-filterable {
  height: 300px;
}

.el-transfer-panel__body {
  height: 350px;
}

.span1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #8492a6;
  font-size: 13px;
  float: left;
  margin-left: 5px;
  text-align: center;
}

.change_button {
  display: flex;
  /* float: right; */
  position: absolute;
  right: 0;
  top: 25px;
}
</style>
